/** @jsxImportSource @emotion/react */
import {
  InputGroup,
  Select,
  Input,
  TextArea,
  Check,
  InputDatalist,
  CheckSwitch,
  SuffixInput,
  InputLine
} from "../Form";
import { Text } from "../Text";
import { Button } from "../Button";
import theme from "../Theme";
import { Layer } from "../Layer";
import * as React from "react";
import { ComboBoxDatalist, } from "../ComboBoxDatalist";
import { LineColumn} from "../LineColumn";
import type {Meta, StoryObj} from "@storybook/react";
import {fn} from "@storybook/test";

const meta: Meta<typeof LineColumn> = {
    title: 'Example/LineColumn',
    component: LineColumn,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
    },
    args: { onClick: fn() },
};
export default meta;
type Story = StoryObj<typeof LineColumn>;
export const 列式布局LineColumn: Story = {
    decorators: [
        (Story) => (
            <>
                <BasicTest />
            </>
        ),
    ],
};
export const 布局紧凑: Story = {
    decorators: [
        (Story) => (
            <>
                <BasicTest2 />
            </>
        ),
    ],
};

function BasicTest() {
    const [query, setQuery] = React.useState('初始' );
    const [大修周期, set大修周期] = React.useState(`12`);
    const [isCar, setisCar] = React.useState(undefined);
    const [船梯, set船梯] = React.useState(undefined);
    const toRender = ["实际vals","asdsafasdcomfsdfdffsdfsdf"];
    return(
        <div
            css={{
                display: "flex",
                justifyContent: "center",
                paddingTop: theme.spaces.xl,
                paddingBottom: theme.spaces.xl
            }}
        >
            <Layer css={{ width: "100%" }} elevation={"lg"}>
                <form css={{ padding: theme.spaces.lg }}>
                    <LineColumn column={5}
                    >
                        <Text>任意的文本LineColumn 测试：h水电费看</Text>
                        <InputLine label="Gender横着">
                            <Select>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </Select>
                        </InputLine>
                        <InputLine  label='第三个儿子' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >月</SuffixInput>
                        </InputLine>
                        <InputLine  label="第4个框">
                            <InputDatalist placeholder="可输入也可选择"
                                           value={ query }
                                           onListChange={v => setQuery(v)}
                                           datalist={["实际vals","asdsafasdcomfsdfdffsdfsdf"]}
                            >
                            </InputDatalist>
                        </InputLine>
                        <InputLine label="报错的Gender，进行样式测试用">
                            <div css={{
                                flex: '1 1 20%',
                                backgroundColor: 'grey'
                            }}
                            >
                                <Check label="Male" checked />
                                <Check label="Female" />
                                <Check label="Other" />
                            </div>
                        </InputLine>
                        <InputLine label="是不是船梯" helpText={'dfgf从vv'}>
                            <CheckSwitch  checked= {船梯 || false}
                                          onChange={e => set船梯(船梯? undefined:true) } />
                        </InputLine>
                        <InputLine  label='what about得接 报告,内部的:' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >个月</SuffixInput>
                        </InputLine>
                        <InputLine error="输入错" label="第二种两个做法ComboBoxDatalist的组合框">
                            <ComboBoxDatalist placeholder="可输入也可选择"
                                              value={ query }
                                              onListChange={v => setQuery(v)}
                                              datalist={["说得好","asdsafasdcomfsdfdffsdfsdf"]}
                            >
                            </ComboBoxDatalist>
                        </InputLine>

                        <InputLine error="This field is required" label="Gender multiple">
                            <Select multiple>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </Select>
                        </InputLine>

                        <InputLine label="Look是船梯" helpText={'dfgf从vv'}>
                            <CheckSwitch  checked= {船梯 || false}
                                          onChange={e => set船梯(船梯? undefined:true) } />
                        </InputLine>

                        <InputLine  label='第二版本获得接报告,内部的:' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >个月</SuffixInput>
                        </InputLine>

                        <InputLine
                            label="Example textarea"
                            helpText="Please provide a brief description of yourself. This will go on your profile."
                        >
                            <TextArea placeholder="Something textarea" />
                        </InputLine>
                        <InputLine label="进行样式测试用">
                            <Check label="单独一个的" />
                        </InputLine>


                        <InputLine helpText="Required field" label="Email yourselfdescriptionaddress profile">
                            <Input type={'file'} placeholder="最基本的 input" />
                        </InputLine>
                        <InputLine label={`放行意见:`} css={{
                        }}>
                            <Text css={{textAlign: "left"}}>个做fanfax东华师ngbfa大和infan二种两法ComboBoxDatalist的组合</Text>
                        </InputLine>
                    </LineColumn>
                    <div css={{ textAlign: "right", marginTop: `${theme.spaces.md}` }}>
                        <Button intent="primary">Submit</Button>
                    </div>
                </form>
            </Layer>
        </div>
    ) ;
}

function BasicTest2() {
    const [query, setQuery] = React.useState('初始' );
    const [大修周期, set大修周期] = React.useState(`12`);
    const [isCar, setisCar] = React.useState(undefined);
    const [船梯, set船梯] = React.useState(undefined);
    const toRender = ["实际vals","asdsafasdcomfsdfdffsdfsdf"];
    return(
        <div
            css={{
                display: "flex",
                justifyContent: "center",
                paddingTop: theme.spaces.xl,
                paddingBottom: theme.spaces.xl
            }}
        >
            <Layer css={{ width: "100%" }} elevation={"lg"}>
                <form css={{ padding: theme.spaces.lg }}>
                    <LineColumn column={5} breaks={[170,290,390,490,750]}
                    >
                        <Text>任意的文本LineColumn 测试：h水电费看</Text>
                        <InputLine label="Gender横着">
                            <Select>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </Select>
                        </InputLine>
                        <InputLine  label='第三个儿子' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >月</SuffixInput>
                        </InputLine>
                        <InputLine  label="第4个框">
                            <InputDatalist placeholder="可输入也可选择"
                                           value={ query }
                                           onListChange={v => setQuery(v)}
                                           datalist={["实际vals","asdsafasdcomfsdfdffsdfsdf"]}
                            >
                            </InputDatalist>
                        </InputLine>
                        <InputLine label="报错的Gender，进行样式测试用">
                            <div css={{
                                flex: '1 1 20%',
                                backgroundColor: 'grey'
                            }}
                            >
                                <Check label="Male" checked />
                                <Check label="Female" />
                                <Check label="Other" />
                            </div>
                        </InputLine>
                        <InputLine label="是不是船梯" helpText={'dfgf从vv'}>
                            <CheckSwitch  checked= {船梯 || false}
                                          onChange={e => set船梯(船梯? undefined:true) } />
                        </InputLine>
                        <InputLine  label='what about得接 报告,内部的:' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >个月</SuffixInput>
                        </InputLine>
                        <InputLine error="输入错" label="第二种两个做法ComboBoxDatalist的组合框">
                            <ComboBoxDatalist placeholder="可输入也可选择"
                                              value={ query }
                                              onListChange={v => setQuery(v)}
                                              datalist={["说得好","asdsafasdcomfsdfdffsdfsdf"]}
                            >
                            </ComboBoxDatalist>
                        </InputLine>

                        <InputLine error="This field is required" label="Gender multiple">
                            <Select multiple>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </Select>
                        </InputLine>

                        <InputLine label="Look是船梯" helpText={'dfgf从vv'}>
                            <CheckSwitch  checked= {船梯 || false}
                                          onChange={e => set船梯(船梯? undefined:true) } />
                        </InputLine>

                        <InputLine  label='第二版本获得接报告,内部的:' helpText={'说明等等4从vv'}>
                            <SuffixInput
                                type="number"
                                value={ 大修周期 || ''}
                                onChange={e => set大修周期( e.currentTarget.value||undefined ) }
                            >个月</SuffixInput>
                        </InputLine>

                        <InputLine
                            label="Example textarea"
                            helpText="Please provide a brief description of yourself. This will go on your profile."
                        >
                            <TextArea placeholder="Something textarea" />
                        </InputLine>
                        <InputLine label="进行样式测试用">
                            <Check label="单独一个的" />
                        </InputLine>


                        <InputLine helpText="Required field" label="Email yourselfdescriptionaddress profile">
                            <Input type={'file'} placeholder="最基本的 input" />
                        </InputLine>
                        <InputLine label={`放行意见:`} css={{
                        }}>
                            <Text css={{textAlign: "left"}}>个做fanfax东华师ngbfa大和infan二种两法ComboBoxDatalist的组合</Text>
                        </InputLine>
                    </LineColumn>
                    <div css={{ textAlign: "right", marginTop: `${theme.spaces.md}` }}>
                        <Button intent="primary">Submit</Button>
                    </div>
                </form>
            </Layer>
        </div>
    ) ;
}
